* {
  padding: 0px;
  margin: 0px; }

html, body {
  width: 100%;
  height: 100%;
  font-size: 7.35294vw; }

@media screen and (max-width: 750px) {
  html {
    font-size: 20vw; } }

.container {
  width: 100%;
  height: 100%;
  background: url(../images/echarts/bj1.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px; }
  .container .login {
    width: 3rem;
    height: 3.6rem;
    background: linear-gradient(230deg, rgba(17, 62, 251, 0.22) 0%, #0251a2 100%);
    padding: 0.4rem;
    border-radius: 0.1rem;
    text-align: center; }
    .container .login .logo {
      width: 0.75rem;
      height: 0.75rem; }
    .container .login h1 {
      color: #fff;
      margin: 0.2rem 0px;
      font-size: 0.3rem; }
    .container .login .uname, .container .login .pwd {
      width: 2.4rem;
      height: 0.45rem;
      border: 0.01rem solid rgba(251, 251, 251, 0.3);
      display: flex;
      align-items: center;
      border-radius: 0.05rem;
      margin: auto; }
      .container .login .uname img, .container .login .pwd img {
        width: 0.2rem;
        height: 0.2rem;
        padding: 0px 0.12rem; }
    .container .login .uname {
      margin-bottom: 0.2rem; }
    .container .login input {
      border: none;
      background: none;
      color: #fff; }
    .container .login input:focus {
      outline: none; }
    .container .login button {
      width: 2.4rem;
      margin-top: 0.2rem;
      outline: none;
      color: #FFFFFF;
      background: #4372da;
      height: 0.46rem;
      border-radius: 0.05rem;
      border-style: none;
      cursor: pointer;
      font-size: 0.18rem; }
    .container .login button:hover {
      background: #6391f5; }

.particle-network-animation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh; }

.particle-network-animation::before {
  z-index: -2;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  opacity: 0.2; }

.glow {
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent); }

.glow-1 {
  width: 150vw;
  height: 150vh;
  margin-top: -75vh;
  margin-left: -75vw;
  animation: glow-1-move 25s linear infinite both; }

@keyframes glow-1-move {
  from {
    transform: translate(-100%, 100%); }
  to {
    transform: translate(100%, -100%); } }

.glow-2 {
  width: 100vw;
  height: 100vh;
  margin-top: -50vh;
  margin-left: -50vw;
  animation: glow-2-move 25s linear 8.3333333333s infinite both; }

@keyframes glow-2-move {
  from {
    transform: translate(-100%, 0%); }
  to {
    transform: translate(100%, 100%); } }

.glow-3 {
  width: 120vw;
  height: 120vh;
  margin-top: -60vh;
  margin-left: -60vw;
  animation: glow-3-move 25s linear 16.6666666667s infinite both; }

@keyframes glow-3-move {
  from {
    transform: translate(100%, 100%); }
  to {
    transform: translate(0%, -100%); } }
